<template>
  <div class="dispatch-manage">
    <div class="map">
      <Map @onload="handleMapLoad" :options="mapOptions" />
    </div>
    <mapBaseLayer
      @handleChangeTree="handleChangeTree"
      @handleChangeRadioSw="acceptName"
      @handleChangeRadioSdl="handleChangeRadioSdl"
      @handleChangeXajParams="handleChangeXajParams"
      @handleChangeSkbyParams="handleChangeSkbyParams"
    />
    <!-- 预报结果 -->
    <resultDetail ref="resDetailRef" />
    <!-- 工程结果 -->
    <resultDetailGc />
    <!-- 水文站 -->
    <appMapInfo ref="mapInfoRef" @dialogClose="handleCloseMap" />
    <!-- //水库 -->
    <MapSk ref="mapSkRef" @dialogClose="handleCloseMap" />
    <!-- 河道 -->
    <RiverInfo ref="riverInfoRef" @dialogClose="handleCloseMap" />
    <!-- 小流域 -->
    <BasinInfo ref="basinInfoRef" @dialogClose="handleCloseMap" />
    <!-- 节点 -->
    <NodeInfo ref="nodeInfoRef" @dialogClose="handleCloseMap" />

    <div class="select-box">
      <SchemeSelect
        :placeholder="state.placeholderOne"
        :define-options="state.optionsOne"
        :images="'u97.png'"
        @changeSelect="handleChangeSelect"
      />
    </div>
    <div class="list-box">
      <SchemeList
        :images="'u21.png'"
        :showbtn="true"
        :title="'调度方案'"
        :data-list="state.dis_schemes"
        :btn-name="state.btnName"
        :show-list="false"
        @handleAdd="handleAddscheme"
        @clickLi="handleClickLi"
      >
      </SchemeList>
    </div>
    <div class="time-box" v-if="state.showTimeSlider">
      <!-- 进度条 -->
      <Player @change="changeDate" :dataSource="state.time_range"></Player>
    </div>

    <div class="right-box" v-if="state.rightFlag" :class="{ 'hidden-icon': ishidden }">
      <div class="fold-icon" @click="closeRightBox">
        <el-icon>
          <DArrowRight :class="{ 'hidden-icon': ishidden }" />
        </el-icon>
      </div>
      <!-- <div class="legend-box"> -->
      <Legend :type="state.legendType" />
      <!-- </div> -->
      <!-- 右侧图例 -->
      <!-- <div class="legend-box" v-if="state.showLegend">
        <el-tabs v-model="iconActiveName" class="demo-tabs" stretch>
          <el-tab-pane label="图标" name="one" v-if="state.blen">
            <template #label>
              <span class="custom-tabs-label">
                <div>
                  <span class="left-title">图标</span>
                </div>
                <el-icon class="right-close" @click="handleCloseLegend">
                  <Close />
                </el-icon>
              </span>
            </template>
            <div class="legend-icon-box">
              <div class="col-height">
                <span class="open-no span-block"></span>
                <span>未启动</span>
              </div>
              <div class="col-height">
                <span class="wait-ing span-block"></span>
                <span>等待中</span>
              </div>

              <div class="col-height">
                <span class="sw-comput span-block"></span>
                <span>水文计算中</span>
              </div>

              <div class="col-height">
                <span class="sk-comput span-block"></span>
                <span>水库调度中</span>
              </div>

              <div class="col-height">
                <span class="is-finish span-block"></span>
                <span>已完成</span>
              </div>

              <div class="col-height">
                <span class="is-error span-block"></span>
                <span>异常</span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="成果图例" name="two" v-else>
            <template #label>
              <span class="custom-tabs-label">
                <div>
                  <span class="left-title">图例</span>
                  <span class="right-title">-{{ state.radioName }}</span>
                </div>
                <el-icon class="right-close" @click="handleCloseLegend">
                  <Close />
                </el-icon>
              </span>
            </template>
            <div class="rain-info" v-if="state.radioValue == 1">
              <div class="legend-icon-box">
                <div class="col-height">
                  <span class="value1 span-res"></span>
                  <span>≥250.0(0)</span>
                </div>

                <div class="col-height">
                  <span class="value2 span-res"></span>
                  <span>100.0~249.9(0)</span>
                </div>

                <div class="col-height">
                  <span class="value3 span-res"></span>
                  <span>50.0~99.9(0)</span>
                </div>

                <div class="col-height">
                  <span class="value4 span-res"></span>
                  <span>25.0~49.9(0)</span>
                </div>
                <div class="col-height">
                  <span class="value5 span-res"></span>
                  <span>10.0~24.9(0)</span>
                </div>
                <div class="col-height">
                  <span class="value6 span-res"></span>
                  <span>0.1~9.9(0)</span>
                </div>
                <div class="col-height">
                  <span class="value7 span-res"></span>
                  <span>0~0.1(166)</span>
                </div>
              </div>
            </div>
            <div class="flow-info" v-else>
              <div class="legend-icon-box">
                <div class="col-height">
                  <span class="value1 span-res"></span>
                  <span>>5000</span>
                </div>

                <div class="col-height">
                  <span class="value2 span-res"></span>
                  <span>1000~5000</span>
                </div>

                <div class="col-height">
                  <span class="value3 span-res"></span>
                  <span>500~1000</span>
                </div>

                <div class="col-height">
                  <span class="value4 span-res"></span>
                  <span>50~500</span>
                </div>

                <div class="col-height">
                  <span class="value5 span-res"></span>
                  <span>10~50</span>
                </div>

                <div class="col-height">
                  <span class="value6 span-res"></span>
                  <span>0~10</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div> -->
      <!--  -->
      <!-- 实测预报 -->
      <rightActual
        v-if="
          state.clickTitle == '实测预报降雨' ||
          state.clickTitle == '典型场次' ||
          state.clickTitle == '模拟降雨'
        "
        @computedValue="acceptHandle"
        :watershedId="state.watershedId"
        :map="mapInstance"
        :selectName="state.proName"
      />
      <!-- 工程预报 -->
      <rightEngineering
        v-if="state.clickTitle == '工程调度'"
        :watershedId="state.watershedId"
        :map="mapInstance"
        :selectName="state.proName"
      />
      <intelligent-rainfall
        v-if="state.clickTitle == '智能降雨'"
        :selectName="state.proName"
        :watershedId="state.watershedId"
        :map="mapInstance"
      />
    </div>
    <component v-if="!state.rightFlag" :is="state.dispatchMds" :childItem="state.childItem" />
  </div>
</template>

<script setup>
import Map from '@/components/app-map/map.vue'
//图例
import Legend from './cpns/legend/index.vue'
//地图基本图层
import mapBaseLayer from '@/components/app-map/mapBaseLayer/index.vue'
import SchemeSelect from '@/components/app-publicui/scheme-select.vue'
import SchemeList from './cpns/accordion/selectList.vue'
//来水
// import laiWater from "./cpns/laiWater/index.vue";
// 实测预报右侧弹框
import rightActual from './cpns/rightActual/index.vue'
// 工程预报右侧弹框
import rightEngineering from './cpns/rightEngineering/index.vue'
// 智能降雨
import IntelligentRainfall from './cpns/intelligent-rainfall/index.vue'
import leftBottomTree from './cpns/leftBottomTree/index.vue'

// import NodeManage from './cpns/NodeManage/index.vue'
//json数据加载
import dis_schemes from '@/assets/data/dis_schemes/dis_schemes.json'
import cal_schemes from '@/assets/data/cal_scheme/cal_schemes.json'
// import dis_pro_info from '@/assets/data/dis_schemes/dis_pro_info.json'
// 地图JSON 数据
import secData from '@/assets/data/map_data/sec.json'
import jsUnitData from '@/assets/data/map_data/js_unit.json'
import topologyData from '@/assets/data/map_data/topology.json'
import wataData from '@/assets/data/map_data/wata.json'
import riverData from '@/assets/data/map_data/rivl.json'
import nodeData from '@/assets/data/map_data/node.json'
//地图计算状态切换模拟数据
import disStatusData1 from '@/assets/data/dis_schemes/dis_status_1.json'
import disStatusData2 from '@/assets/data/dis_schemes/dis_status_2.json'
import disStatusData3 from '@/assets/data/dis_schemes/dis_status_3.json'
import disStatusData4 from '@/assets/data/dis_schemes/dis_status_4.json'
//沂沭河流域json
import yshsecData from '@/assets/data/map_data/yshInfo/sec.json'
import yshjsUnitData from '@/assets/data/map_data/yshInfo/unitdata.json'
import yshtopologyData from '@/assets/data/map_data/yshInfo/topologyData.json'
import yshnodeData from '@/assets/data/map_data/yshInfo/node.json'
//计算结果
import resultDetail from './cpns/rightActual/cpns/computResult/cpns/resultDetail/index.vue'
import resultDetailGc from './cpns/rightEngineering/cpns/computResult/cpns/resultDetail/index.vue'
//水文
import appMapInfo from '@/components/app-map-info/index.vue'
//水库
import MapSk from '@/components/app-map-popup/index.vue'
//时间轴
import Player from '@/components/app-publicui/player.vue'
//河道
import RiverInfo from '@/components/app-basin-river/river-info/index.vue'
//小流域
import BasinInfo from '@/components/app-basin-river/basin-info/index.vue'
//节点
import NodeInfo from '@/components/app-basin-river/node-info/index.vue'
//api
import {
  getAutoDispatchScheme,
  deleteAutoDispatchScheme,
  deleteManualDispatchScheme,
  // getManualDispatchScheme,
  manualCalculate,
  getManualSchemessections,
  getComputSchemeProgress,
  getDispatchManualSchemeProgSection,
  getDispatchManualSchemeProgSectionExtent
} from '@/services/modules/dispatch-manage'
//pinia
import { useDispatchManage, useDispatchManage1 } from '@/store/modules/dispatch-manage.js'
import { useUnitInfo, useBlkcd } from '@/store/modules/compute-methods.js'
import {
  getCalcZoneSectionGeomList,
  getCalcRsysZoneSectionGeomList,
  getSectionUnitGeom
} from '@/services/modules/map.js'
//地图api
import {
  getPPtnGeomList,
  getSecGeomList,
  getNodeGeomList,
  getTopologyGeomList
} from '@/services/modules/map.js'
import { getZone } from '@/services/modules/model-config'
import emitter from '@/utils/bus'
import { ref, reactive, markRaw, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { generateHourlyTimeArray } from '@/utils/index.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { BASE_URL } from '@/services/config'
import { storeToRefs } from 'pinia'
import {
  clearLayer,
  clearGeoLayer,
  addSecPoints,
  addSecName,
  addTopology,
  addJsUnit,
  addWataLayer,
  addRiverLayer,
  addNodeLayer,
  changeJsUnitGraphic,
  addJsUnitNoScheme,
  addTileLayer,
  addDynamicLayerShowAll,
  locatePoint,
  removeBasinVectorTiles,
  addBasinVectorTiles,
  addImageToMap,
  removeLayer,
  addGeojsontoFlyLine,
  addRainFlowtoMap,
  divGraphicYellow
} from '@/utils/mapUtils'
import {
  SEC_LAYER,
  RAIN_LAYER,
  SEC_NAME_LAYER,
  JS_UNIT_LAYER,
  TOPOLOGY_LAYER,
  WATA_LAYER,
  RIVER_LAYER,
  NODE_LAYER,
  DWH_SECAREA_LAYER_URL,
  DWH_SECAREA_LAYER,
  YSH_SECAREA_LAYER_URL,
  YSH_SECAREA_LAYER,
  YSH_BASE_LAYER_URL,
  YSH_BASE_LAYER,
  IMG_LAYER,
  DISPATCH_RAIN_LAYER,
  DISPATCH_RIVER_LAYER,
  DISPATCH_FLOW_LAYER,
  DWH_BASE_LAYER_URL,
  DWH_SKBYUNIT_LAYER_URL,
  DWH_SKBYUNIT_LAYER,
  DWH_XAJUNIT_LAYER_URL,
  DWH_XAJUNIT_LAYER,
  YSH_SKBYUNIT_LAYER_URL,
  YSH_SKBYUNIT_LAYER,
  YSH_XAJUNIT_LAYER_URL,
  YSH_XAJUNIT_LAYER,
  DWH_BASE_LAYER,
  UNIT_SEC_LAYER
} from '@/constants'
import { color } from 'echarts'
const currentLi = ref(null)
const mapInfoRef = ref(null)
//
const resDetailRef = ref(null)
// 地图初始化参数
const mapOptions = { crs: 'EPSG:4490', basemaps: [] }
const state = reactive({
  legendType: { id: 'one', value: '' },
  swValue: '',
  showTimeSlider: false,
  time_range: [],
  date_time: '',
  markTime: [],
  startMeddleTime: '',
  isAutoPlay: false,
  showLayer: false,
  clickTitle: '实测预报降雨',
  pptn: {},
  secGeoData: {},
  nodeGeoData: {},
  topologyGeoData: {},
  mapInit: {},
  radioValue: '0',
  //被选中的方案
  checkedSc: [],
  //父级scid
  scParentId: 1,
  dispatchSchemeList: [],
  fourAngle: {},
  progressInfo: {},
  timer: null,
  statusTimer: null,
  scid: '',
  childItem: {},
  fcid: '',
  schemeName: '--',
  btnName: '新建来水预报方案',
  watershedId: 1,
  autoSchemeList: [],
  manualSchemeList: [],
  dis_pro_info: [],
  dis_schemes: [],
  dispatchMds: '',
  tabComp: '',
  rightFlag: true,
  activeName: ['1', '2'],
  placeholder: '大汶河优选方案',
  placeholderOne: '大汶河流域',
  optionsOne: [],
  options: [],
  blen: true,
  radioName: '',
  showLegend: true
})
//打开图层
const handleOpenLayer = (item) => {
  state.showLayer = item
}
//新安江 style
const xajUnitStyle = reactive({
  xaj: {
    weight: 0.3,
    // fillOpacity: 0.6,
    fillColor: 'green',
    color: 'red',
    fill: false
  }
})
//时空变源style
const skbyUnitStyle = reactive({
  skby: {
    weight: 0.3,
    // fillOpacity: 0.6,
    fillColor: 'red',
    color: 'yellow',
    fill: false
  }
})
// 点击右侧弹框计算时的事件
const acceptHandle = () => {
  iconActiveName.value = 'one'
  state.blen = true
  state.showLegend = true
}
// 关闭图例框
const handleCloseLegend = () => {
  state.showLegend = false
}
//清空图层
const clearLayers = () => {
  removeBasinVectorTiles(mapInstance, DISPATCH_RAIN_LAYER)
  removeBasinVectorTiles(mapInstance, DISPATCH_RIVER_LAYER)
  removeBasinVectorTiles(mapInstance, DISPATCH_FLOW_LAYER)
  removeBasinVectorTiles(mapInstance, 'SWSECRAINLAYER')
  removeBasinVectorTiles(mapInstance, 'SWSECFLOWLAYER')
  removeBasinVectorTiles(mapInstance, 'SWRIVERFLOWLAYER')
  removeBasinVectorTiles(mapInstance, 'section')
  removeBasinVectorTiles(mapInstance, 'cell')
}
// 获取图例
// 获取图例
const acceptName = (data) => {
  emitter.emit('ZTLegend')

  let val = data.id
  state.legendType = data
  state.swValue = data.id
  state.blen = false
  iconActiveName.value = 'two'
  state.showLegend = true
  clearLayers()
  removeLayer(mapInstance, IMG_LAYER)
  let startTime = useDispatchManage().swTime[0]
  let endTime = useDispatchManage().swTime[1]
  state.time_range = generateHourlyTimeArray(startTime, endTime)
  state.radioValue = 0
  if (val == 4) {
    addBasinVectorTiles(
      mapInstance,
      BASE_URL + `/map/vectorTiles/dispatchSelection/${useDispatchManage().scid}/{z}/{x}/{y}`,
      DISPATCH_RAIN_LAYER,
      {
        dispatch: function (properties) {
          console.log(properties, '123')
          var color
          //fcmxqtype 雨量1到7  pavtype洪峰流量1-6
          if (properties.pavtype == 1) {
            color = 'rgb(174, 174, 174)'
          } else if (properties.pavtype == 2) {
            color = 'rgb(167, 240, 143)'
          } else if (properties.pavtype == 3) {
            color = 'rgb(62, 184, 62)'
          } else if (properties.pavtype == 4) {
            color = 'rgb(98, 183, 255)'
          } else if (properties.pavtype == 5) {
            color = 'rgb(0, 0, 253)'
          } else if (properties.pavtype == 6) {
            color = 'rgb(249, 1, 249)'
          } else if (properties.pavtype == 7) {
            color = 'rgb(127, 1, 64)'
          }
          return {
            weight: 1,
            fillOpacity: 0.6,
            fillColor: color,
            color: 'black',
            fill: true
          }
        }
      }
    )
  } else if (val == 5) {
    addBasinVectorTiles(
      mapInstance,
      BASE_URL + `/map/vectorTiles/dispatchSelection/${useDispatchManage().scid}/{z}/{x}/{y}`,
      DISPATCH_FLOW_LAYER,
      {
        dispatch: function (properties) {
          console.log(properties, '123')
          var color
          if (properties.fcmxqtype == 1) {
            color = 'rgb(167, 240, 143)'
          } else if (properties.fcmxqtype == 2) {
            color = 'rgb(62, 184, 62)'
          } else if (properties.fcmxqtype == 3) {
            color = 'rgb(98, 183, 255)'
          } else if (properties.fcmxqtype == 4) {
            color = 'rgb(0, 0, 253)'
          } else if (properties.fcmxqtype == 5) {
            color = 'rgb(249, 1, 249)'
          } else if (properties.fcmxqtype == 6) {
            color = 'rgb(127, 1, 64)'
          }
          return {
            weight: 1,
            fillOpacity: 0.6,
            fillColor: color,
            color: 'black',
            fill: true
          }
        }
      }
    )
  } else if (val == 6) {
    state.radioValue = 1
    addBasinVectorTiles(
      mapInstance,
      BASE_URL + `/map/vectorTiles/dispatchRivel/${useDispatchManage().scid}/{z}/{x}/{y}`,
      DISPATCH_RIVER_LAYER,
      {
        dispatch: function (properties) {
          console.log(properties, '123')
          var color

          if (properties.maxflowtype == 1) {
            color = 'rgb(167, 240, 143)'
          } else if (properties.maxflowtype == 2) {
            color = 'rgb(62, 184, 62)'
          } else if (properties.maxflowtype == 3) {
            color = 'rgb(98, 183, 255)'
          } else if (properties.maxflowtype == 4) {
            color = 'rgb(0, 0, 253)'
          } else if (properties.maxflowtype == 5) {
            color = 'rgb(249, 1, 249)'
          } else if (properties.maxflowtype == 6) {
            color = 'rgb(127, 1, 64)'
          }
          return {
            weight: 6,
            color: color
            // opacity: 1
            // strokeColor: 'red'
            // weight: 1,
            // fillOpacity: 0.6,
            // // fillColor: color,
            // color: color,
            // strokeColor: 'black',
            // fill: true
          }
        }
      }
    )
  }
  if (val == 7 || val == 8 || val == 9) {
    state.showTimeSlider = true
    // state.startMeddleTime = state.time_range[2]
    if (val == 7) {
      addBasinVectorTiles(
        mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatchSelectionTime/${useDispatchManage().scid}/${
            state.date_time || state.time_range[0]
          }/{z}/{x}/{y}`,
        'SWSECRAINLAYER',
        {
          dispatch: function (properties) {
            console.log(properties, '123')
            var color
            //fcmxqtype 雨量1到7pavtype洪峰流量1-6
            if (properties.pavtype == 1) {
              color = 'rgb(174, 174, 174)'
            } else if (properties.pavtype == 2) {
              color = 'rgb(167, 240, 143)'
            } else if (properties.pavtype == 3) {
              color = 'rgb(62, 184, 62)'
            } else if (properties.pavtype == 4) {
              color = 'rgb(98, 183, 255)'
            } else if (properties.pavtype == 5) {
              color = 'rgb(0, 0, 253)'
            } else if (properties.pavtype == 6) {
              color = 'rgb(249, 1, 249)'
            } else if (properties.pavtype == 7) {
              color = 'rgb(127, 1, 64)'
            }
            return {
              weight: 1,
              fillOpacity: 0.6,
              fillColor: color,
              color: 'black',
              fill: true
            }
          }
        }
      )
    } else if (val == 8) {
      addBasinVectorTiles(
        mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatchSelectionTime/${useDispatchManage().scid}/${
            state.date_time || state.time_range[0]
          }/{z}/{x}/{y}`,
        'SWSECFLOWLAYER',
        {
          dispatch: function (properties) {
            console.log(properties, '123')
            var color
            if (properties.fcmxqtype == 1) {
              color = 'rgb(167, 240, 143)'
            } else if (properties.fcmxqtype == 2) {
              color = 'rgb(62, 184, 62)'
            } else if (properties.fcmxqtype == 3) {
              color = 'rgb(98, 183, 255)'
            } else if (properties.fcmxqtype == 4) {
              color = 'rgb(0, 0, 253)'
            } else if (properties.fcmxqtype == 5) {
              color = 'rgb(249, 1, 249)'
            } else if (properties.fcmxqtype == 6) {
              color = 'rgb(127, 1, 64)'
            }
            return {
              weight: 1,
              fillOpacity: 0.6,
              fillColor: color,
              color: 'black',
              fill: true
            }
          }
        }
      )
    } else if (val == 9) {
      addBasinVectorTiles(
        mapInstance,
        BASE_URL +
          `/map/vectorTiles/dispatchRiverTime/${useDispatchManage().scid}/${
            state.date_time || state.time_range[0]
          }/{z}/{x}/{y}`,
        'SWRIVERFLOWLAYER',
        {
          dispatch: function (properties) {
            console.log(properties, '123')
            var color

            if (properties.maxflowtype == 1) {
              color = 'rgb(167, 240, 143)'
            } else if (properties.maxflowtype == 2) {
              color = 'rgb(62, 184, 62)'
            } else if (properties.maxflowtype == 3) {
              color = 'rgb(98, 183, 255)'
            } else if (properties.maxflowtype == 4) {
              color = 'rgb(0, 0, 253)'
            } else if (properties.maxflowtype == 5) {
              color = 'rgb(249, 1, 249)'
            } else if (properties.maxflowtype == 6) {
              color = 'rgb(127, 1, 64)'
            }
            return {
              weight: 3,
              color: color
              // opacity: 1
              // strokeColor: 'red'
              // weight: 1,
              // fillOpacity: 0.6,
              // // fillColor: color,
              // color: color,
              // strokeColor: 'black',
              // fill: true
            }
          }
        }
      )
    }
  } else {
    state.showTimeSlider = false
  }
}
//改变日期
function changeDate(date) {
  console.log(date, '改变日期')

  state.date_time = state.time_range[date]
  acceptName(state.legendType)
  handleChangeRadioSdl(state.legendType)
}
//
const handleChangeRadioSdl = (val) => {
  emitter.emit('ZTLegend')
  removeLayer(mapInstance, IMG_LAYER)

  clearLayers()
  state.legendType = val
  state.showTimeSlider = true

  let startTime = useDispatchManage().swTime[0]
  let endTime = useDispatchManage().swTime[1]
  state.time_range = generateHourlyTimeArray(startTime, endTime)
  switch (val.id) {
    case '11':
      addBasinVectorTiles(
        mapInstance,
        BASE_URL +
          `/map/vectorTiles/sec/result/${useDispatchManage().scCode}/${
            state.date_time || state.time_range[0]
          }/{z}/{x}/{y}`,
        'section',
        {
          section: function (properties) {
            console.log(properties, '一维')
            var color
            if (properties.dlev == 1) {
              color = '#67ddf1'
            } else if (properties.dlev == 2) {
              color = '#7cf14b'
            } else if (properties.dlev == 3) {
              color = '#e2f150'
            } else if (properties.dlev == 4) {
              color = '#df742f'
            } else if (properties.dlev == 5) {
              color = '#da3263'
            } else if (properties.dlev == 6) {
              color = '#d830d9'
            } else if (properties.dlev == 7) {
              color = '#4816ec'
            }
            return {
              weight: 1,
              fillOpacity: 0.6,
              fillColor: color,
              color: color,
              fill: true
            }
          }
        }
      )
      // addBasinVectorTiles(
      //   mapInstance,
      //   BASE_URL +
      //     `/map/vectorTiles/sec/result/f96761f4-9703-42f2-b183-343415417efa/2023-07-21 08:00:00/{z}/{x}/{y}`,
      //   'section',
      //   {
      //     section: function (properties) {
      //       console.log(properties, '一维断面')
      //     }
      //   }
      // )
      break
    case '12':
      addBasinVectorTiles(
        window.mapInstance,
        BASE_URL +
          `/map/vectorTiles/cell/result/${useDispatchManage().scCode}/${
            state.date_time || state.time_range[0]
          }/{z}/{x}/{y}`,
        'cell',
        {
          cell: function (properties) {
            console.log(properties, '2维')
            var color
            if (properties.dlev == 1) {
              color = '#67ddf1'
            } else if (properties.dlev == 2) {
              color = '#7cf14b'
            } else if (properties.dlev == 3) {
              color = '#e2f150'
            } else if (properties.dlev == 4) {
              color = '#df742f'
            } else if (properties.dlev == 5) {
              color = '#da3263'
            } else if (properties.dlev == 6) {
              color = '#d830d9'
            } else if (properties.dlev == 7) {
              color = '#4816ec'
            }
            return {
              weight: 0,
              fillOpacity: 0.6,
              color: color,
              // outlineColor:'green',
              // outlineWidth:0.05,
              fill: true
            }
          }
        }
      )
      // addBasinVectorTiles(
      //   window.mapInstance,
      //   BASE_URL +
      //     `/map/vectorTiles/cell/result/f96761f4-9703-42f2-b183-343415417efa/2023-07-21 08:00:00/{z}/{x}/{y}`,
      //   'cell',
      //   {
      //     cell: function (properties) {
      //       console.log(properties, '二维断面')
      //     }
      //   }
      // )
      break

    default:
      break
  }
}
function handleChangeXajParams(val) {
  emitter.emit('ZTLegend')
  clearLayers()
  removeLayer(mapInstance, IMG_LAYER)

  state.showTimeSlider = false
  state.legendType = val
}
function handleChangeSkbyParams(val) {
  clearLayers()
  removeLayer(mapInstance, IMG_LAYER)

  emitter.emit('ZTLegend')
  state.showTimeSlider = false
  state.legendType = val
}
//
//
async function handleChangeTree(e) {
  clearLayers()
  removeLayer(mapInstance, IMG_LAYER)

  // 展开图例
  emitter.emit('ZTLegend')
  let { event, item } = e
  //被选中的值
  console.log(event + ':' + item)
  // await PPtnGeomList()
  // await SecGeomList()
  // await NodeGeomList()
  // await TopologyGeomList()

  switch (item) {
    case 'sec':
      if (event) {
        if (state.watershedId == 1) {
          // 添加断面
          addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
          // 添加断面名称
          addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
        } else if (state.watershedId == 2) {
          // 添加断面点
          addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
          // 添加断面名称
          addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
        }
      } else {
        clearLayer(mapInstance, SEC_LAYER)
        clearLayer(mapInstance, SEC_NAME_LAYER)
      }
      break
    case 'jsUnitSk':
      if (event) {
        if (state.watershedId == 1) {
          //添加预报单元
          addBasinVectorTiles(
            window.mapInstance,
            DWH_SKBYUNIT_LAYER_URL,
            DWH_SKBYUNIT_LAYER,
            skbyUnitStyle
          )
          // //添加计算单元
          // addJsUnit(window.mapInstance, jsUnitData, JS_UNIT_LAYER)
        } else if (state.watershedId == 2) {
          // // //添加计算单元
          // addJsUnit(window.mapInstance, yshjsUnitData, JS_UNIT_LAYER)
          addBasinVectorTiles(
            window.mapInstance,
            YSH_SKBYUNIT_LAYER_URL,
            YSH_SKBYUNIT_LAYER,
            skbyUnitStyle
          )
        }
      } else {
        removeBasinVectorTiles(window.mapInstance, DWH_SKBYUNIT_LAYER)
        removeBasinVectorTiles(window.mapInstance, YSH_SKBYUNIT_LAYER)
      }
      break
    case 'jsUnitXaj':
      if (event) {
        if (state.watershedId == 1) {
          //添加预报单元
          addBasinVectorTiles(
            window.mapInstance,
            DWH_XAJUNIT_LAYER_URL,
            DWH_XAJUNIT_LAYER,
            xajUnitStyle
          )
          // //添加计算单元
          // addJsUnit(window.mapInstance, jsUnitData, JS_UNIT_LAYER)
        } else if (state.watershedId == 2) {
          // // //添加计算单元
          // addJsUnit(window.mapInstance, yshjsUnitData, JS_UNIT_LAYER)
          addBasinVectorTiles(
            window.mapInstance,
            YSH_XAJUNIT_LAYER_URL,
            YSH_XAJUNIT_LAYER,
            xajUnitStyle
          )
        }
      } else {
        removeBasinVectorTiles(window.mapInstance, DWH_XAJUNIT_LAYER)
        removeBasinVectorTiles(window.mapInstance, YSH_XAJUNIT_LAYER)
      }
      break
    case 'topology':
      if (event) {
        addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
      } else {
        clearLayer(mapInstance, TOPOLOGY_LAYER)
      }
      break
    case 'river':
      if (event) {
        if (state.watershedId == 1) {
          //添加小流域
          // addWataLayer(mapInstance, wataData, WATA_LAYER)
          removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
          addBasinVectorTiles(mapInstance, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, baselayerStyle)
        } else if (state.watershedId == 2) {
          removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
          addBasinVectorTiles(mapInstance, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, baselayerStyle)
        }
        // //添加河道
        // addRiverLayer(mapInstance, riverData, RIVER_LAYER)
      } else {
        if (state.watershedId == 1) {
          // clearLayer(mapInstance, RIVER_LAYER)
          removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
          // addBasinVectorTiles(mapInstance, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, baselayerStyle)
        } else if (state.watershedId == 2) {
          // clearLayer(mapInstance, RIVER_LAYER)
          removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
          // addBasinVectorTiles(mapInstance, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, baselayerStyle)
        }
      }
      break
    case 'node':
      if (event) {
        addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
      } else {
        clearLayer(mapInstance, NODE_LAYER)
      }
      break
    case 'rainSite':
      if (event) {
        addRainLayer(map, state.pptn, RAIN_LAYER)
      } else {
        clearLayer(mapInstance, RAIN_LAYER)
      }
      break
    default:
      break
  }
}
//预报断面区域矢量切片图层样式
const secAreaStyle = reactive({
  skby: {
    weight: 0.3,
    fillOpacity: 1,
    fillColor: '#9eada1',
    color: 'red',
    fill: true
  }
})
const baselayerStyle = reactive({
  //小流域
  wata: {
    weight: 0.8,
    fillOpacity: 0.6,
    fillColor: '#FFFF00',
    color: '#FFFF00',
    fill: false
  },
  //河道
  rivl: {
    weight: 1,
    strokeColor: '#00BFFF'
  }
})

//自动预报弹框ref
const autoSchemeRef = ref(null)
//水库
const mapSkRef = ref(null)
//
const basinInfoRef = ref(null)
//
const riverInfoRef = ref(null)
//
const nodeInfoRef = ref(null)
const activeName = ref('first')
const iconActiveName = ref('one')
const switchActive = ref('one')
const checkSec = ref(true)
const checkJsUnit = ref(true)
const checkTopology = ref(true)
const checkWata = ref(true)
const checkRiver = ref(true)
const checkNode = ref(true)
const checkRainSite = ref(true)
const ishidden = ref(true)
const showSchemeModel = ref(false)
const closeRightBox = () => {
  ishidden.value = !ishidden.value
}
const selectedsecStyle = reactive({
  // fill: true,
  // fillColor: null,
  // fillOpacity: 0.6,
  // outline: true,
  // outlineWidth: 5,
  // outlineColor: '#00ffff',
  // outlineOpacity: 1,
  width: 5,
  color: '#00ffff'
})
emitter.on('closePage', (value) => {
  state.rightFlag = value
})
emitter.on('fixedPosition', (value) => {
  //查询计算单元坐标信息
  getSectionUnitGeom({ blkcd: value.blkcd }).then((res) => {
    if (res.code === 200) {
      // if (res.data?.geom) {
      //   let arr = multipolygonToLnglats(res.data.geom)
      //   addTopologyOne(mapInstance, arr, UNIT_SEC_LAYER)
      // }
      if (res.data) {
        addGeojsontoFlyLine(mapInstance, res.data, UNIT_SEC_LAYER, selectedsecStyle)
      }
    }
  })
  // updateJsUnitSecGraphic(mapInstance, value.blkcd, JS_UNIT_LAYER)
})
//地图获取雨量站
function PPtnGeomList() {
  return new Promise((resolve, reject) => {
    getPPtnGeomList({ zoneId: state.watershedId }).then((res) => {
      if (res.code === 200) {
        state.pptn = res.data
        resolve(state.pptn)
      }
    })
  })
}
//地图获取预报对象
function SecGeomList() {
  return new Promise((resolve, reject) => {
    getSecGeomList({ zoneId: state.watershedId }).then((res) => {
      if (res.code === 200) {
        state.secGeoData = res.data
        console.log(res.data, '预报')
        resolve(state.secGeoData)
      }
    })
  })
}
//地图获取节点
function NodeGeomList() {
  return new Promise((resolve, reject) => {
    getNodeGeomList({ zoneId: state.watershedId }).then((res) => {
      if (res.code === 200) {
        console.log(res.data, '地图节点')
        state.nodeGeoData = res.data
        resolve(state.nodeGeoData)
      }
    })
  })
}
//地图获取拓扑线
function TopologyGeomList() {
  return new Promise((resolve, reject) => {
    getTopologyGeomList({ zoneId: state.watershedId }).then((res) => {
      if (res.code === 200) {
        state.topologyGeoData = res.data
        resolve(state.topologyGeoData)
      }
    })
  })
}
// const clickLi = (item, index) => {
//   // 'one':人工
//   if (switchActive.value == 'one') {
//     state.scid = item.id
//     state.scParentId = item.id
//     state.childItem = item
//     console.log('state', state.scid)
//     state.schemeName = item.scName
//     state.fcid = item.scCode
//     currentLi.value = index
//     state.progressInfo = {}
//     emitter.emit('clearTime')

//     removeLayer(mapInstance, IMG_LAYER)
//   } else {
//     // 自动预报
//   }
//   // getDispatchInfos({ schemeCode: index.id }).then((res) => {
//   //   if (res.code === 200) {
//   //     state.dis_pro_info = res.data[0]
//   //   }
//   // })
//   ishidden.value = false
// }
function handleCloseMap() {
  useUnitInfo().$reset()
  useDispatchManage().$reset()
  useBlkcd().$reset()
}
function handleClickLi(item) {
  storeToRefs(useDispatchManage1()).leftSelectList.value = item.title
  ishidden.value = false
  state.clickTitle = item.title
  if (state.clickTitle == '实测预报降雨') {
    state.proName = '实测预报降雨'
  } else if (state.clickTitle == '典型场次') {
    state.proName = '典型场次'
  } else if (state.clickTitle == '模拟降雨') {
    state.proName = '模拟降雨'
  } else if (state.clickTitle == '智能降雨') {
    state.proName = '智能降雨'
  } else if (state.clickTitle == '工程调度') {
    emitter.emit('refreshChildList')
    console.log('工程预报刷新')
  }
}

function getZoneList() {
  return new Promise((resolve, reject) => {
    getZone().then((res) => {
      if (res.code === 200) {
        state.optionsOne = res.data
        zoneId.value = res.data[0].id
        //  initData()
        resolve(zoneId.value)
      }
    })
  })
}
//删除自动预报调度方案
function handleDeleteAutoScheme(item) {
  ElMessageBox.confirm(`是否删除${item.scName}`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteAutoDispatchScheme({ id: item.id }).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.msg)
          initData()
        }
      })
    })
    .catch(() => {})
}
// function handleDeleteManScheme(item) {
//   ElMessageBox.confirm(`是否删除${item.scName}`, '提示', {
//     confirmButtonText: '确认',
//     cancelButtonText: '取消',
//     type: 'warning'
//   })
//     .then(() => {
//       deleteManualDispatchScheme({ id: item.id }).then((res) => {
//         if (res.code === 200) {
//           ElMessage.success(res.msg)
//           getManualList()
//           getManualDispatchScheme({
//             zoneId: state.watershedId,
//             parentId: state.scid
//           }).then((res) => {
//             if (res.code === 200) {
//               state.dispatchSchemeList = res.data
//             }
//           })
//         }
//       })
//     })
//     .catch(() => {})
// }
// //删除方案
// function handleDeleteScheme(item){

// }
//选择流域
async function handleChangeSelect(item, val) {
  state.watershedId = item
  initData()
  // getManualList()
  await PPtnGeomList()
  await SecGeomList()
  await NodeGeomList()
  await TopologyGeomList()
  clearLayer(mapInstance, SEC_LAYER)
  clearLayer(mapInstance, SEC_NAME_LAYER)
  clearLayer(mapInstance, JS_UNIT_LAYER)
  clearLayer(mapInstance, TOPOLOGY_LAYER)
  clearLayer(mapInstance, NODE_LAYER)
  clearLayer(mapInstance, WATA_LAYER)
  clearLayer(mapInstance, RIVER_LAYER)
  clearLayer(mapInstance, NODE_LAYER)
  removeBasinVectorTiles(mapInstance, DWH_SECAREA_LAYER)
  removeBasinVectorTiles(mapInstance, YSH_SECAREA_LAYER)
  removeBasinVectorTiles(mapInstance, DWH_BASE_LAYER)
  removeBasinVectorTiles(mapInstance, YSH_BASE_LAYER)
  if (item == 2) {
    // 添加断面点
    addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)

    // 添加断面名称
    addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
    // addBasinVectorTiles(mapInstance, YSH_SECAREA_LAYER_URL, YSH_SECAREA_LAYER, secAreaStyle)
    // //添加计算单元
    // addJsUnit(mapInstance, yshjsUnitData, JS_UNIT_LAYER)
    // addJsUnitNoScheme(mapInstance, yshjsUnitData, JS_UNIT_LAYER)
    //添加拓扑线
    addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
    addBasinVectorTiles(mapInstance, YSH_BASE_LAYER_URL, YSH_BASE_LAYER, baselayerStyle)

    // //添加节点
    addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
    locatePoint(mapInstance, 118.379657, 35.018398, 10)
  } else {
    let map = mapInstance

    const layerUrlS = mapUrl
    addTileLayer(mapInstance, layerUrlS, 0, 74, '山东底图')
    addDynamicLayerShowAll(
      mapInstance,
      'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/L1_Liuyujie/MapServer',
      12,
      11,
      '流域界'
    )

    addDynamicLayerShowAll(
      mapInstance,
      'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/Shandong_XZHQ/MapServer',
      26,
      32,
      '蓄滞洪区'
    )
    // 添加断面点
    addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)

    //添加计算单元
    // addJsUnitNoScheme(map, jsUnitData, JS_UNIT_LAYER)

    addBasinVectorTiles(mapInstance, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, baselayerStyle)
    // 添加断面名称
    addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
    //添加拓扑线

    addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
    // //添加小流域
    // addWataLayer(map, wataData, WATA_LAYER)
    // //添加河道
    // addRiverLayer(map, riverData, RIVER_LAYER)
    //添加节点
    addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)

    locatePoint(mapInstance, 117.1775, 36.06469, 10)
  }
}
function handleChangeTab(val) {
  switchActive.value = val
  if (val == 'one') {
    state.btnName = '新建来水预报方案'
  } else if (val == 'two') {
    state.btnName = '新建自动预报调度方案'
  }
}
//新增预报方案
const handleAddscheme = () => {
  if (state.btnName == '新建自动预报调度方案') {
    autoSchemeRef.value.handleOpenModal(state.watershedId)
  } else if (state.btnName == '新建来水预报方案') {
    emitter.emit('clearTime')
    removeLayer(mapInstance, IMG_LAYER)
  }
  // showSchemeModel.value = true
}
//关闭
function closeDispatch() {
  showSchemeModel.value = false
}

const clickDispatchMethods = () => {
  state.rightFlag = false
  state.dispatchMds = markRaw(DispatchScheme)
}

// const clcikNodemanage = () => {
//   state.rightFlag = false
//   state.dispatchMds = markRaw(NodeManage)
// }
//新建滚动预报方案

/**
 * 地图实例
 */
let mapInstance = null
/**
 * 地图实例完成后的调用函数
 */
const handleMapLoad = ({ map }) => {
  setTimeout(async () => {
    mapInstance = map
    state.mapInit = map
    storeToRefs(useDispatchManage()).map.value = map
    await PPtnGeomList()
    await SecGeomList()
    await NodeGeomList()
    await TopologyGeomList()

    const layerUrlS = mapUrl
    // addTileLayer(mapInstance, layerUrlS, 0, 74, '山东底图')

    // addDynamicLayerShowAll(
    //   mapInstance,
    //   'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/L1_Liuyujie/MapServer',
    //   12,
    //   11,
    //   '流域界'
    // )

    // addDynamicLayerShowAll(
    //   mapInstance,
    //   'https://giskg-sdsl.gistack.cn/OneMapServer/rest/services/Shandong_XZHQ/MapServer',
    //   26,
    //   32,
    //   '蓄滞洪区'
    // )
    // 添加断面点
    // addSecPoints(mapInstance, state.secGeoData.features, SEC_LAYER)
    // 添加断面名称
    // addSecName(mapInstance, state.secGeoData.features, SEC_NAME_LAYER)
    // addBasinVectorTiles(mapInstance, DWH_SECAREA_LAYER_URL, DWH_SECAREA_LAYER, secAreaStyle)
    // //添加计算单元
    // addJsUnitNoScheme(map, jsUnitData, JS_UNIT_LAYER)
    // 添加拓扑线
    // addTopology(mapInstance, state.topologyGeoData, TOPOLOGY_LAYER)
    // addBasinVectorTiles(mapInstance, DWH_BASE_LAYER_URL, DWH_BASE_LAYER, baselayerStyle)

    // //添加小流域
    // addWataLayer(map, wataData, WATA_LAYER)
    // //添加河道
    // addRiverLayer(map, riverData, RIVER_LAYER)
    // 添加节点
    // addNodeLayer(mapInstance, state.nodeGeoData, NODE_LAYER)
    // divGraphicYellow(mapInstance, 'import')
    // locatePoint(mapInstance, 117.1775, 36.06469, 10)
  }, 100)
}
const changeJsUnitStatus = () => {
  setInterval(() => {
    for (let i = 0; i <= 3; i++) {
      setTimeout(() => {
        let disStatusData
        getDispatchManualSchemeProgSection({ scid: state.scid }).then((res) => {
          if (res.code === 200) {
            disStatusData = res.data
          }
        })
        // if (i == 0) {
        //   disStatusData = disStatusData1
        // } else if (i == 1) {
        //   disStatusData = disStatusData2
        // } else if (i == 2) {
        //   disStatusData = disStatusData3
        // } else {
        //   disStatusData = disStatusData4
        // }
        changeJsUnitGraphic(mapInstance, disStatusData, JS_UNIT_LAYER)
      }, 2000 * i)
    }
  }, 8000)
}
//保存调度
function handleSaveDispatch() {
  initData()
  // getManualList()
}
function handleSaveManDispatch() {
  initData()
  // getManualList()
}
// emitter.on('refreshList', (value) => {
//   getManualList()
// })
// emitter.on('clickSecRes', (value) => {
//   getManualDispatchScheme({ zoneId: state.watershedId, parentId: 0 }).then((res) => {
//     if (res.code === 200) {
//       state.manualSchemeList = res.data
//       state.manualSchemeList.forEach((item, index) => {
//         if (item.id == value) {
//           clickLi(state.manualSchemeList[index], index)
//         }
//       })
//     }
//   })
// })
function handleChange(item) {}
function initData() {
  // getDispatchs().then((res) => {
  //   if (res.code === 200) {
  //     state.dis_schemes = res.data.map((item) => ({
  //       title: item.schemeName,
  //       id: item.schemeCode
  //     }))
  //   }
  // })
  // getAutoDispatchScheme({ zoneId: state.watershedId }).then((res) => {
  //   if (res.code === 200) {
  //     state.autoSchemeList = res.data
  //   }
  // })
  getZone().then((res) => {
    if (res.code === 200) {
      state.optionsOne = res.data
    }
  })
  state.options = cal_schemes.map((item) => ({
    label: item.schemeName,
    value: item.isPublish
  }))
}
// function getManualList() {
//   getManualDispatchScheme({ zoneId: state.watershedId, parentId: 0 }).then((res) => {
//     if (res.code === 200) {
//       state.manualSchemeList = res.data
//       clickLi(state.manualSchemeList[0], 0)
//     }
//   })
// }
onMounted(() => {
  initData()
  // getManualList()
  useUnitInfo().$reset()
  useBlkcd().$reset()
})
onBeforeUnmount(() => {
  clearTimeout(state.timer)
  clearInterval(state.statusTimer)
})
</script>

<style lang="less" scoped>
.el-row {
  height: 30px;
}
.el-table /deep/.DisabledSelection .cell .el-checkbox__inner {
  display: none;
  position: relative;
}
.el-table /deep/.DisabledSelection .cell:before {
  content: '成果比选查看';
  position: absolute;
  right: 11px;
}
:deep(.el-dialog-box) {
  height: 90vh;
  margin-top: 5vh !important;
  .el-dialog__body {
    height: calc(100% - 100px);
  }
}
.dispatch-manage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  //按钮颜色
  .red-color {
    color: red;
  }
  .green-color {
    color: green;
  }

  .map {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .select-box {
    display: flex;
    width: 500px;
    height: 60px;
    position: absolute;
    top: 50px;
    left: 30px;
    .ul-box {
      ul {
        height: 230px;
        overflow-y: auto;
        font-size: 14px;
        .item-li {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 35px;
          position: relative;

          cursor: pointer;
          span {
            color: #797979;
          }
          span:nth-of-type(1) {
            max-width: 200px; //也可以设置最大宽度
            overflow: hidden; //溢出隐藏
            white-space: nowrap; // 强制一行显示
            text-overflow: ellipsis; // 显示。。。省略号
          }
          .close-icon {
            color: red;
            position: absolute;
            right: 10px;
          }
          &.active {
            span {
              color: #0154db;
            }
            .close-icon {
              color: red;
              position: absolute;
              right: 10px;
            }
          }
        }
      }
    }
    .header-select {
      width: 200px;
    }
  }
  .list-box {
    position: absolute;
    top: 100px;
    left: 30px;
    .ul-box {
      ul {
        height: 200px;
        overflow-y: auto;
        font-size: 14px;
        .item-li {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 35px;
          position: relative;
          cursor: pointer;
          span {
            color: #797979;
          }
          span:nth-of-type(1) {
            max-width: 200px; //也可以设置最大宽度
            overflow: hidden; //溢出隐藏
            white-space: nowrap; // 强制一行显示
            text-overflow: ellipsis; // 显示。。。省略号
          }
          .close-icon {
            color: red;
            position: absolute;
            right: 10px;
          }
          &.active {
            span {
              color: #0154db;
            }
            .close-icon {
              color: red;
              position: absolute;
              right: 10px;
            }
          }
        }
      }
    }
  }
  .select-basin {
    position: absolute;
    bottom: 40px;
    left: 60px;
    width: 210px;
    height: auto;
  }
  .time-box {
    position: absolute;
    bottom: 40px;
    left: 300px;
    width: 1300px;
    height: 85px;
  }
  // .legend-rainFlow {
  //   position: absolute;
  //   background: rgba(255, 255, 255, 0.7);
  //   bottom: 220px;
  //   width: 240px;
  //   height: 150px;
  //   margin-left: 20px;
  //   border: #169bd5 2px solid;
  //   padding: 0 10px;
  //   box-sizing: border-box;
  //   border-radius: 5px;
  //   :deep(.el-radio-group) {
  //     margin-top: 15px;
  //     margin-left: 20px;
  //     .el-radio__input.is-checked + .el-radio__label {
  //       color: #409eff !important;
  //     }
  //     .el-radio {
  //       color: black;
  //       .el-radio__input {
  //         .el-radio__inner {
  //           width: 14px;
  //           height: 14px;
  //           opacity: 0.64;
  //           // background: #092455;
  //           background: #ffffff;
  //           border: 1px solid grey;
  //           &::after {
  //             width: 10px;
  //             height: 10px;
  //             background: linear-gradient(0deg, #00c0ff 0%, #2dfffe 97%);
  //           }
  //         }
  //         .is-checked {
  //           .el-checkbox__label {
  //             font-size: 14px;
  //             font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  //             font-weight: 400;
  //             text-align: left;
  //             color: #409eff !important;
  //           }
  //         }
  //       }
  //       // .el-checkbox__label {
  //       //   font-size: 14px;
  //       //   font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  //       //   font-weight: 400;
  //       //   text-align: left;
  //       //   color: #ffffff !important;
  //       // }
  //     }
  //   }
  // }

  .right-box {
    // width: 1300px;
    width: 70%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 4px;
    background: #f5f9fc;
    transition: right 1s;
    z-index: 100;
    // .legend-box {
    //   position: absolute;
    //   z-index: 99;
    //   background: rgba(255, 255, 255, 0.7);
    //   bottom: 20px;
    //   right: 1120px;
    //   width: 300px;
    //   height: 300px;
    //   // margin-left: 20px;
    //   border: #169bd5 2px solid;
    //   padding: 0 10px;
    //   box-sizing: border-box;
    //   border-radius: 5px;
    //   .custom-tabs-label {
    //     width: 100%;
    //     display: flex;
    //     align-items: center;
    //     justify-content: space-between;
    //     .left-title {
    //       font-size: 19px;
    //     }
    //     .right-title {
    //       color: black;
    //       font-size: 17px;
    //     }
    //     .right-close {
    //       font-size: 25px;
    //     }
    //   }
    //   .legend-icon-box {
    //     height: 250px;
    //     overflow-y: auto;
    //     .col-height {
    //       display: flex;
    //       align-items: center;
    //       height: 40px;
    //       span {
    //         color: #409eff;
    //       }
    //       .span-block {
    //         width: 15px;
    //         height: 15px;
    //         margin-right: 5px;
    //         border: 1px solid rgba(0, 0, 0, 0.088);
    //       }
    //       .span-res {
    //         width: 15px;
    //         height: 15px;
    //         border-radius: 50%;
    //         margin-right: 5px;
    //         border: 1px solid rgba(0, 0, 0, 0.088);
    //       }
    //       .value1 {
    //         background-color: rgb(127, 1, 64);
    //       }
    //       .value2 {
    //         background-color: rgb(249, 1, 249);
    //       }
    //       .value3 {
    //         background-color: rgb(0, 0, 253);
    //       }
    //       .value4 {
    //         background-color: rgb(98, 183, 255);
    //       }
    //       .value5 {
    //         background-color: rgb(62, 184, 62);
    //       }
    //       .value6 {
    //         background-color: rgb(167, 240, 143);
    //       }
    //       .value7 {
    //         background-color: rgb(174, 174, 174);
    //       }
    //       .open-no {
    //         background-color: #999d9c;
    //       }
    //       .wait-ing {
    //         background-color: #86e7fe;
    //       }
    //       .sw-comput {
    //         background-color: #00ff7f;
    //       }
    //       .sk-comput {
    //         background-color: #006994;
    //       }

    //       .is-finish {
    //         background-color: #008000;
    //       }
    //       .is-error {
    //         background-color: #ff0000;
    //       }
    //     }
    //   }

    //   :deep(.el-tabs) {
    //     .el-tabs__header {
    //       margin-bottom: 5px;
    //     }
    //   }
    //   .legend-item {
    //     margin-left: 20px;
    //   }
    // }
    &.hidden-icon {
      right: -70%;
      transition: right 1s;
    }
    .fold-icon {
      width: 20px;
      height: 120px;
      line-height: 120px;
      position: absolute;
      background: #eee;
      top: 50%;
      left: -20px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top-left-radius: 35px;
      border-bottom-left-radius: 35px;
      transform: translateY(-50%);
      @keyframes myload {
        from {
          opacity: 0;
          -webkit-transform: rotate(0deg); /* Safari */
          transform: rotate(0deg); /* 标准语法 */
        }
        to {
          opacity: 1;
          -webkit-transform: rotate(0deg); /* Safari */
          transform: rotate(0deg); /* 标准语法 */
        }
      }
      .el-icon {
        cursor: pointer;
        position: relative;
        display: block;
        animation: myload 1s infinite ease-in-out;
        -webkit-animation: myload 1s infinite ease-in-out;
        svg {
          &.hidden-icon {
            // border-top-right-radius: 35px;
            // border-bottom-right-radius: 35px;
            transform: rotate(180deg);
          }
        }
      }
    }
    .title-box {
      padding: 15px 0 0 15px;
      height: 40px;
      display: flex;
      justify-content: space-between;
      .title {
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          color: black;
          font-weight: 400;
          font-size: 16px;
        }
      }
      .btn-group {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 15px;
        .btn-item {
          margin-left: 25px;
          cursor: pointer;
          span {
            color: #0154db;
            border-bottom: 1px solid #0154db;
            font-size: 12px;
            font-weight: 600;
          }
        }
      }
    }
  }
}
</style>
